prosemirror-state

What is prosemirror-state?

The prosemirror-state package is a part of the ProseMirror toolkit, which is used to manage the state of a ProseMirror editor. It provides a way to represent the editor's state, including the document, selection, and any other metadata. This package is essential for creating and manipulating the state of a ProseMirror editor, allowing for complex text editing functionalities.

What are prosemirror-state's main functionalities?

EditorState

The EditorState class is used to create and manage the state of the editor. This includes the document, selection, and any other metadata. The code sample demonstrates how to create an EditorState instance using a schema and a document parsed from the DOM.

const { EditorState } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  }
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
const state = EditorState.create({ doc });
console.log(state);

Transaction

Transactions are used to apply changes to the editor state. The code sample demonstrates how to create a transaction that inserts text into the document and then apply that transaction to the state.

const { EditorState, Transaction } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  }
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));
let state = EditorState.create({ doc });

let tr = state.tr.insertText('Hello, world!', 1, 1);
state = state.apply(tr);
console.log(state.doc.content);

Plugin

Plugins allow you to extend the functionality of the editor. The code sample demonstrates how to create a plugin that logs keydown events and add it to the editor state.

const { EditorState, Plugin } = require('prosemirror-state');
const { Schema, DOMParser } = require('prosemirror-model');

const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { content: 'text*', toDOM: () => ['p', 0] },
    text: { inline: true }
  }
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));

const myPlugin = new Plugin({
  props: {
    handleDOMEvents: {
      keydown(view, event) {
        console.log('A key was pressed:', event.key);
        return false;
      }
    }
  }
});

const state = EditorState.create({ doc, plugins: [myPlugin] });
console.log(state);

Other packages similar to prosemirror-state

draft-js

Draft.js is a framework for building rich text editors in React. It provides a similar set of functionalities for managing editor state, but is more tightly integrated with React. Unlike ProseMirror, which is framework-agnostic, Draft.js is specifically designed for use with React.

slate

Slate is another framework for building rich text editors in React. It offers a more flexible and customizable approach compared to Draft.js, allowing developers to define their own schema and plugins. Like ProseMirror, Slate provides fine-grained control over the editor state and document structure.

quill

Quill is a powerful, free, open-source WYSIWYG editor. It provides a high-level API for managing editor state and content, but does not offer the same level of low-level control as ProseMirror. Quill is more focused on providing a ready-to-use editor with a rich set of features out of the box.

README

prosemirror-state

[ WEBSITE | ISSUES | FORUM | GITTER ]

ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements the editor state, which tracks the current document and selection, and managed plugins.

The project page has more information, a number of demos and the documentation.

NOTE: This project is in BETA stage. It isn't thoroughly tested, and the API might still change across 0.x releases. You are welcome to use it, but don't expect it to be very stable yet.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

Changelog

0.12.0 (2016-10-21)

Breaking changes

The interace to EditorState.toJSON and EditorState.fromJSON has changed.

The way plugins declare their state field has changed. Only one state field per plugin is supported, and state fields no longer have hard-coded names. Plugin.getState is the way to access plugin state now.

Plugin dependencies are no longer supported.

Plugin.reconfigure is gone. Plugins are now always created with new Plugin.

Plugins no longer have a config field.

Bug fixes

Node selections are now properly dropped when mapped over a change that replaces their nodes.

New features

Plugin keys can now be used to find plugins by identity.

Transform actions now have a time field containing the timestamp when the change was made.